<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6新知识</title>
</head>

<body>

</body>
<!-- const和let和var 
ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）
-->

<script>
    var x = '全局变量';
    {
        let x = '局部变量';
        console.log(x); // 局部变量
    }
    console.log(x); // 全局变量
    // let表示声明变量，而const表示声明常量，两者都为块级作用域；
    /**
     * const 
     * const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：
     * 常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
     * const 在声明时必须被赋值
     * let 和 const 声明只在最靠近的一个块中（花括号内）有效
    */

    // const a = 1
    // a = 0 //报错
    // console.log(a);
    // 如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：
    const student0 = { name: 'cc' }
    student0.name = 'yy';// 不报错
    // student = { name: 'yy' };// 报错
</script>
<!-- 处理模板字符串 -->
<script>
    // ES5
    "This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on."
    // ES6
 `This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`
</script>
<!--  去重数组  Array.from -->
<script>
    // Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
    let arr = [1, 2, 2, 221, 3, 6, 5, 4, 2, 5, 8, 9, 2, 3];
    function uni(arr) {
        return Array.from(new Set(arr));
    }
    console.log(uni(arr));
    // 数组去重 利用Set+扩展运算符 …
    let arr1 = [0, 1, 5, 2, 3, 4, 6, 7, 8, 9, 4, 1, 5, 2]
    let newarry = [...new Set(arr1)];
    console.log(newarry);
</script>

<!-- 箭头函数的对比 -->
<script>
    // ES5
    const fun = function (v) {
        return v;
    }
    console.log(fun("好酷的箭头函数"));
    // ES6
    const fun1 = v => v;
    console.log(fun("好酷的箭头函数1"));
</script>

<!-- es6跟es5计算区别 -->
<script>
    // es6
    // "=>"左边的a是函数的参数，右边是函数的声明;
    const jisuan = a => a * a;
    console.log(jisuan(5));
    // es5
    function lets(a) {
        a = a * a;
        return a
    }
    console.log(lets(6));
    // 或者
    const jisuan1 = function (a) {
        return a = a * a;
    }
    console.log(jisuan1(7));
</script>
<!-- 
个人理解es6箭头：
箭头的左边是参数，右边是函数体
 -->
<script>
    // es6多个参数 参数用小括号扩起来，并且每个参数用逗号隔开
    const jisuan2 = (a, b) => a * b;
    console.log(jisuan2(5, 6));
    //  当函数体中的语句超过一条的时候，函数体需要用大括号括起来：
    const jisuan3 = a => {
        if (a > 5) {
            a++;
        } else {
            a--;
        }
        return a
    }
    console.log(jisuan3(3));//2
    // 当函数中没有参数时候，在箭头左侧加上一个小括号：
    let jisuan4 = () => { return '函数中没有参数' }
    console.log(jisuan4());
</script>

<!-- 
this指向:
实际上箭头函数中是没有自己的this，在箭头函数中调用this对象是继承而来的，默认是指向定义它的时候的对象，而不是执行对象。
简单理解：
es6的箭头函数中的this是定义时的绑定：
所谓的定义时候绑定，就是this是继承自父执行上下文中的this！
比如这里的箭头函数中的this.b，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.b实际上表示的是window.b，因此输出的是5
-->
<script>
    var b = 5;
    var a = {
        b: 6,
        c: function () {
            console.log(this.b);   //6
        },
        d: () => {
            console.log(this.b);  //5
        },
        e: function () {
            console.log(this.b);//
        }
    }
    a.c();
    a.d();
    a.e()
</script>

<!-- for...of 和 for...in -->
<script>
    // <!-- for ..in 用来遍历对象中的属性：-->
    let arrstus = ['aa', "bb", "cc"];
    for (const key in arrstus) {
        const element = arrstus[key];
        console.log(element);//aa,bb,cc
        console.log(key);//0,1,2
    }
    // <!-- for...of 用于遍历一个迭代器，如数组-->
    let arrstus1 = ['dd', "ee", "ff"];
    for (const iterator of arrstus1) {
        console.log(iterator);//dd,ee,ff
    }

</script>
<script>
    // 对象
    const student = {
        name: 'Sam',
        age: 22,
        sex: '男'
    }
    // 数组
    // const student = ['Sam', 22, '男'];

    // ES5；
    const name = student.name;
    const age = student.age;
    const sex = student.sex;
    console.log(name + ' --- ' + age + ' --- ' + sex);
    const student2 = {
        name1: 'Sam111',
        age2: 2222,
        sex3: '男'
    }
    // ES6
    const { name1, age2, sex3 } = student2;
    console.log(name1 + ' --- ' + age2 + ' --- ' + sex3);
</script>
<script>
    // 传值赋值和传址赋值
    /*
    Person={}修改是报错的，这就是传值
     Person.name = 'john';则可以修改，这就是传址赋值
    */
    const Person = {
        'name': 'matt'
    };
    Person.name = 'john';
    Person.age = 12;
    console.log(Person);
</script>
<script>
    var zhang={
        "meng":"red"
    }
    var wang=zhang;
    wang.meng = "green";
    console.log(wang);//结果：输出 {door: "green"}
   console.log(zhang);//结果：输出 {door: "green"}
</script>

</html>